<template>
    <van-nav-bar title="基本资料" left-arrow fixed @click-left="onBack" />

    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="user">
        <div class="user-image">
            <img :src="userInfo.avatar_cdn" alt="">
        </div>
    </div>

    <div class="form">
        <van-form @submit="onProfile">
            <van-field v-model="userInfo.mobile" readonly name="mobile" label="手机号" placeholder="手机号" label-align="right"
                label-width="4.5em" colon :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="userInfo.nickname" name="nickname" label="昵称" placeholder="昵称" label-align="right"
                label-width="4.5em" colon :rules="[{ required: true, message: '请填写昵称' }]" />
            <van-field v-model="userInfo.email" name="email" label="邮箱" placeholder="邮箱" label-align="right"
                label-width="4.5em" type="email" colon :rules="[{ required: true, message: '请填写邮箱' }]" />
            <van-field v-model="userInfo.password" type="password" name="password" label="密码" placeholder="密码为空就不修改密码" label-align="right" label-width="4.5em"
                colon />
            <van-field name="gender" label="性别" label-align="right" label-width="4.5em" colon>
                <template #input>
                    <van-radio-group v-model="userInfo.gender" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-model="userInfo.region_text" is-link readonly name="region" label="地区选择" placeholder="点击选择城市"
                @click="showArea = true" label-align="right" label-width="4.5em" colon />
            <!-- 头像 -->
            <van-field name="avatar" label="头像上传" label-align="right" label-width="4.5em" colon>
                <template #input>
                    <van-uploader v-model="state.avatar" :max-count="1" />
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

        <!-- 地区弹出层 -->
        <van-popup v-model:show="showArea" position="bottom">
            <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" v-model="userInfo.district" />
        </van-popup>
    </div>
</template>

<script setup>
import { areaList } from '@vant/area-data';
import { useUserStore } from '@/store/user.js'
import { storeToRefs } from 'pinia'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import apiList from '@/api'
import resJudge from '@/hooks/res.js'
// import { showNotify, showToast } from 'vant'


const router = useRouter()
const userStore = useUserStore()
let { userInfo } = storeToRefs(userStore)

let state = reactive({
    avatar: [],
    // areaList
})

let showArea = ref(false)

function onBack() {
    router.go(-1)
}

async function onProfile(values) {
    let data = {
        id: userInfo.value.id,
        nickname: values.nickname,
        email: values.email,
        gender: values.gender,
        province: userInfo.value.province,
        city: userInfo.value.city,
        district: userInfo.value.district
    }

    //如果填了密码
    if (values.password) {
        data.password = values.password
    }

    if (values.avatar[0]) {
        let avatar = values.avatar[0].file || ''
        data.avatar = avatar
    }
    let res = await apiList.profile(data)
    if(resJudge(res)){
        router.push('/business/base/index')
    }
}
// 获取选中地区
function onConfirm(values) {
    showArea.value = false//关闭地区弹出层

    let [province, city, district] = values.selectedOptions

    if (province.value) {
        userInfo.value.region_text = province.text + '-'
        userInfo.value.province = province.value
    }
    if (city.value) {
        userInfo.value.region_text += city.text + '-'
        userInfo.value.city = city.value
    }

    if (district.value) {
        userInfo.value.region_text += district.text
        userInfo.value.district = district.value
    }
}

</script>


<style>
@import url('/assets/css/profile.css');
</style>